<!--组件-二级菜单-椭圆-->
<template>
  <div>
    <scroller class="scroller" show-scrollbar="false" :scroll-direction="'horizontal'">

      <!-- 没间距 -->
      <div class="wrapper bg2" v-if="menus.length < 3">
        <div :class="['but', (menu == index ? 'main1' : 'bg2')]" v-for="(name, index) in menus" v-bind:key="index" @click="menuClick($event, index)">
          <text :class="['font30', (menu == index ? 'text1' : 'text2')]">{{name}}</text>
        </div>
      </div>

      <!-- 有间距 -->
      <div :class="['wrapper', (max ? '': 'height46')]" v-else>
        <div :class="['but', (max ? 'but-max': 'but-min'), (menu == index ? 'main1' : 'bg2')]" v-for="(name, index) in menus" v-bind:key="index" @click="menuClick($event, index)">
          <text :class="[(max ? 'font30': 'font26'), (menu == index ? 'text1' : 'text2')]">{{name}}</text>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>

const dom = weex.requireModule('dom');
export default {
  props:{
    max:{ //max大的
      type:Boolean,
      default:true,
    },
    menus: Array,
    menu: Number,
  },
  
  data() {
    return {
    };
  },

  mounted(){
  },

  methods:{

    /********************************** 点击触发*/
    menuClick(event, index){
      const target = event.target;
      dom.scrollToElement(target, {offset: 0});

      this.$emit("menuClick",index);
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.scroller {
  flex: 1;
  flex-direction: row;
}
.wrapper {
  flex-direction: row;
  height: 54px;
  border-radius: 100%;
}

.but {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  min-width: 160px;
  border-radius: 100%;

  padding-left: 20px;
  padding-right: 20px;
}
.but-min {
  min-width: 136px;
  margin-right: 16px;
}
.but-max {
  min-width: 160px;
  margin-right: 20px;
}
.height46 {
  height: 46px;
}
</style>
